Riot.js-এ Asynchronous Rendering এবং Data Fetching হল দুটি গুরুত্বপূর্ণ বিষয়, যা আপনাকে API থেকে ডেটা লোড করতে এবং তা কম্পোনেন্টের মধ্যে অ্যাসিনক্রোনাসভাবে রেন্ডার করতে সহায়তা করে। Asynchronous rendering সাধারণত তখন ব্যবহৃত হয় যখন আপনি কিছু ডেটা পেতে সময় নেন (যেমন API কল), এবং এই ডেটাকে কম্পোনেন্টের UI-তে প্রদর্শন করতে চান।
Riot.js ডেটা ফেচিংয়ের জন্য JavaScript এর Promises বা async/await ব্যবহার করতে সহায়তা করে এবং যখন ডেটা আসে, তখন সেই ডেটাকে state বা props হিসাবে কম্পোনেন্টে আপডেট করা হয়।
Asynchronous Rendering এবং Data Fetching-এর উদাহরণ:
১. Data Fetching with fetch() API:
এখানে একটি উদাহরণ দেয়া হলো যেখানে আমরা fetch() API ব্যবহার করে ডেটা ফেচ করবো এবং সেটি UI তে রেন্ডার করবো।
<!-- DataFetchingExample.riot -->
<data-fetching-example>
<h1>Fetched Data</h1>
<!-- Show loading message until data is fetched -->
<p if={isLoading}>Loading...</p>
<!-- Display data when fetched -->
<ul if={!isLoading}>
<li each={item in data}>{item.name}</li>
</ul>
<script>
export default {
onMounted() {
this.isLoading = true; // Initially, data is loading
this.data = []; // Initialize empty data array
// Fetch data asynchronously when component is mounted
this.fetchData();
},
async fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
this.isLoading = false; // Data has been fetched, hide loading message
this.data = data; // Store fetched data into component's state
} catch (error) {
console.error('Error fetching data:', error);
this.isLoading = false; // Stop loading even in case of error
}
}
}
</script>
</data-fetching-example>
ব্যাখ্যা:
fetchData(): এই ফাংশনটিfetch()API ব্যবহার করে ডেটা ফেচ করবে।async/awaitব্যবহৃত হয়েছে যাতে ফেচিং প্রক্রিয়া সিঙ্ক্রোনাসভাবে কাজ করে।isLoading: এটি একটি স্টেট যা ফেচিং চলাকালে লোডিং মেসেজ দেখাতে ব্যবহৃত হচ্ছে।data: এখানে ফেচ করা ডেটা রাখা হচ্ছে, যেটি পরবর্তীতে UI তে রেন্ডার হবে।
কি ঘটছে?
- প্রথমে কম্পোনেন্ট লোড হওয়ার পর
onMounted()ফাংশনটি কল হবে, যেখানেfetchData()কল করা হবে। - ডেটা ফেচিং প্রক্রিয়া চলাকালীন "Loading..." মেসেজ দেখানো হবে।
- ফেচিং সফল হলে,
this.dataতে ডেটা সেট করা হবে এবং সেই ডেটা UI তে প্রদর্শিত হবে। - যদি কোনো ত্রুটি হয়, তাহলে error মেসেজ কনসোলে লগ হবে এবং লোডিং মেসেজ বন্ধ হবে।
২. Error Handling and Fallback UI:
এটি একটি গুরুত্বপূর্ণ অংশ, যেহেতু যখন আপনি অ্যাসিনক্রোনাস ডেটা ফেচ করেন, তখন নানা ধরনের ত্রুটি (network error, server error, etc.) হতে পারে। সেক্ষেত্রে, একটি ফ্যালব্যাক UI দেখানো প্রয়োজন।
<!-- ErrorHandlingExample.riot -->
<error-handling-example>
<h1>Fetched Data with Error Handling</h1>
<p if={isLoading}>Loading...</p>
<p if={hasError}>Failed to load data. Please try again later.</p>
<ul if={!isLoading && !hasError}>
<li each={item in data}>{item.name}</li>
</ul>
<script>
export default {
onMounted() {
this.isLoading = true;
this.hasError = false;
this.data = [];
this.fetchData();
},
async fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
this.isLoading = false;
this.data = data;
} catch (error) {
console.error('Error fetching data:', error);
this.isLoading = false;
this.hasError = true; // Set error state to true
}
}
}
</script>
</error-handling-example>
ব্যাখ্যা:
hasError: যদি কোনো সমস্যা হয় (যেমন API থেকে ডেটা না আসা বা নেটওয়ার্ক সমস্যা), তাহলেhasErrorস্টেটটিকেtrueসেট করা হবে এবং ফ্যালব্যাক UI দেখানো হবে।throw new Error(): যদি API থেকে কোনো সমস্যা হয় (যেমন, রেসপন্স ঠিক না পাওয়া), তাহলে একটি ত্রুটি ছুড়ে দেওয়া হবে।
৩. Using Async/Await for Data Fetching:
async/await ব্যবহারে ডেটা ফেচিং আরও সহজ এবং পরিষ্কার হয়। এটি Promises ব্যবহার করার একটি আধুনিক এবং সিম্পল উপায়।
Async/Await Example:
<!-- AsyncAwaitExample.riot -->
<async-await-example>
<h1>Data Fetching Example with Async/Await</h1>
<p if={isLoading}>Loading...</p>
<ul if={!isLoading && !hasError}>
<li each={item in data}>{item.name}</li>
</ul>
<p if={hasError}>An error occurred while fetching data.</p>
<script>
export default {
onMounted() {
this.isLoading = true;
this.hasError = false;
this.data = [];
this.fetchData(); // Fetch data on mount
},
async fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
this.isLoading = false;
this.data = data;
} catch (error) {
console.error('Error:', error);
this.isLoading = false;
this.hasError = true;
}
}
}
</script>
</async-await-example>
ব্যাখ্যা:
async fetchData(): এখানেfetchData()একটি অ্যাসিনক্রোনাস ফাংশন হিসেবে ব্যবহৃত হচ্ছে, যেখানেawaitদিয়ে API কলের প্রতিটি ধাপের জন্য অপেক্ষা করা হচ্ছে।- Error Handling:
catchব্লকের মাধ্যমে কোনো ত্রুটি ঘটলে তা হ্যান্ডেল করা হচ্ছে এবংhasErrorপরিবর্তিত হবে।
৪. Optimistic Rendering (অপটিমিস্টিক রেন্ডারিং):
অপটিমিস্টিক রেন্ডারিং একটি ধারণা যেখানে আপনি অনুমান করেন যে ডেটা সাফল্যের সাথে লোড হবে এবং UI তে দ্রুত পরিবর্তন ঘটান। এটি প্রাথমিকভাবে লোডিং প্রক্রিয়াকে আরও দ্রুত এবং স্ন্যাপি করতে সহায়তা করে, যদিও ডেটা আসার সময় কিছুটা দেরি হতে পারে।
Riot.js এ Asynchronous Rendering এবং Data Fetching এর সারাংশ:
- Asynchronous rendering এবং data fetching ব্যবহার করে আপনি API থেকে ডেটা ফেচ করতে পারেন এবং তা React-style বা Vue-style প্যাটার্নে রেন্ডার করতে পারেন।
- Riot.js-এ async/await এবং Promises এর মাধ্যমে সহজেই অ্যাসিনক্রোনাস কোড লেখতে পারবেন।
- Error handling এবং fallback UI আপনাকে নেটওয়ার্ক বা সার্ভার ত্রুটি হ্যান্ডেল করতে সহায়তা করবে।
আপনি যদি API থেকে ডেটা ফেচ করতে চান এবং এটি UI-তে রেন্ডার করতে চান, Riot.js এর মধ্যে Asynchronous Rendering এবং Data Fetching সঠিকভাবে হ্যান্ডেল করা খুবই সহজ।
Read more
